<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css选择器</title>
		<style>
			/**内部样式css**/
			/*标签选择器*/
			
			p,
			font {
				color: red;
			}
			/*类选择器*/
			
			.fontColor {
				color: yellow;
			}
			/*id选择器*/
			
			#p3,
			#p2 {
				color: aqua;
			}
			/*派生选择器*/
			#books li{
				color:red;
			}
			/**相邻选择器*/
			/*#hlm + li{
				color: yellow;
			}*/
			/*子对象选择器*/
			
			/*#books > ol > li {
				color: yellow;
			}*/
			
			/**属性选择器**/
			/*p[class="fontColor"]{
				color: darkviolet!important ;
			}*/
			
			/**css3扩展选择器**/
			#books > li:nth-child(1) li:first-child{
				color: black!important ;
			}
			
		</style>
	</head>

	<body>
		<p id="p1">你好这一个段落</p>
		<font id="f1" class="fontColor">你好这是一段文字</font><br>
		<font id="f2" style="color: blue;">这又是一段文字</font>
		<p id="p2" class="fontColor">这是一个新的段落</p>
		<p id="p3">这还是一个段落00000000</p>
		<ul id="books">
			<li>四大名著：
				<ol>
					<li id="hlm">红楼梦</li>
					<li>三国演义</li>
					<li>水浒传</li>
					<li>西游记</li>
				</ol>
			</li>
			<li>武侠系列：
				<ol>
					<li>倚天屠龙</li>
					<li>天龙八部：
						<ul>
							<li>第一部</li>
							<li>第二部</li>
						</ul>
					</li>
				</ol>
			</li>
		</ul>
	</body>

</html>